<template>
  <div class="login-container">
    <!-- 登录 -->
    <div class="login-wrap">
      <div class="container">
        <div class="loginform">
          <h2 class="tab clearfix">
            <a href="##" style="border-right: 0">扫描登录</a>

            <a href="##" class="current">账户登录</a>
          </h2>

          <div class="content">
            <form>
              <div class="input-text clearfix">
                <span></span>
                <input
                  type="text"
                  placeholder="邮箱/用户名/手机号"
                  v-model="phone"
                  name="phone"
                />
              </div>
              <div class="input-text clearfix">
                <span class="pwd"></span>
                <input
                  type="text"
                  placeholder="请输入密码"
                  v-model="password"
                  name="password"
                />
              </div>
              <div class="setting clearfix">
                <label class="checkbox inline">
                  <input name="m1" type="checkbox" checked="" />
                  自动登录
                </label>
                <span class="forget">忘记密码？</span>
              </div>
              <button class="btn" @click.prevent="userLogin">登&nbsp;&nbsp;录</button>
            </form>

            <div class="call clearfix">
              <ul class="fl">
                <li><img src="./images/qq.png" alt="" /></li>
                <li><img src="./images/sina.png" alt="" /></li>
                <li><img src="./images/ali.png" alt="" /></li>
                <li><img src="./images/weixin.png" alt="" /></li>
              </ul>
              <router-link class="register fr" to="/register"
                >立即注册</router-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",

  data() {
    return {
      password: "",
      phone: "",
    };
  },

  mounted() {},

  methods: {
    async userLogin() {
      try {
        //登录成功
        const { phone, password } = this;
                let userparams = {
          phone,
        
          password,
        };
        if(password.trim()==""||phone.trim()==""){
          return alert("请不要输入空")
        }
        phone &&
          password &&
          (await this.$store.dispatch("user/userLogin", userparams));
        //登录的路由组件：看路由当中是否包含query参数，有：调到query参数指定路由，没有：调到home
        let toPath =  this.$route.query.redirect||"/home"
        this.$router.push(toPath);
      } catch (error) {
        alert(error.message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-wrap {
  background-color: #e93854;

  .container {
    height: 487px;

    background: url(./images/loginbg.png) no-repeat;
  }
  .loginform {
    width: 420px;
    height: 406px;

    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    //位置
    float: right;
    top: 45px;
    position: relative;

    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  }
  .tab {
    a {
      box-sizing: border-box;
      border: 1px solid #ddd;
      display: block;
      width: 50%;
      float: left;
      text-align: center;
      padding: 10px;
    }
    .current {
      border-bottom: none;
      border-top-color: #e1251b;
      color: #e1251b;
    }
  }
  .content {
    width: 380px;
    height: 316px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-top: none;
    padding: 20px;

    border-radius: 4px 4px;
    div {
      margin-bottom: 26px;
    }
    .input-text {
      line-height: 32px;
      height: 32px;

      display: flex;
      span {
        width: 37px;

        border: 1px solid #ccc;
        background: url(~@/assets/images/icons.png) no-repeat -10px -201px;
        box-sizing: border-box;
        border-radius: 2px 0 0 2px;
      }

      .pwd {
        background-position: -72px -201px;
      }

      input {
        flex: 1;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-left: none;
        outline: none;

        padding: 6px 8px;

        font-size: 14px;

        border-radius: 0 2px 2px 0;
      }
    }
    .setting {
      label {
        float: left;
      }

      .forget {
        float: right;
      }
    }
    .btn {
      cursor: pointer;
      text-align: center;
      border: 1px solid #e1251b;
      background-color: #e93854;
      padding: 6px;
      font-size: 16px;
      border-radius: 25px;
      width: 100%;
      height: 36px;
      color: #fff;
      outline: none;
      &:hover {
        background: #e1251b;
      }
    }
  }
  .call {
    margin-top: 26px;

    li {
      float: left;
    }

    .register {
      font-size: 15px;
      line-height: 38px;
    }

    .register:hover {
      color: #4cb9fc;
      text-decoration: underline;
    }
  }
}
</style>
